<template>
  <div class="home_ui">
<keep-alive>
    <div class="papers_box">

      <header style="position: fixed;background: white;z-index: 10;width: 100%"><h1>{{headers[headerSelected]
        .name}}</h1>
          <span v-for="(item,index) in headers" v-if="item.id!=headers[headerSelected].id"
                @click="headerSelected=index;order=item.order">{{item.name}}
          </span>
      </header>
      <br><br><br><br>
      <div v-for="header in headers" v-if="header.id==headerSelected">
      <van-list
              v-model="$store.state[header.order].loading" :finished="$store.state[header.order].finished" finished-text="没有更多内容了，欢迎您参与创作"
              @load="onLoad(header.order)">
      <div class="h_flex" v-for="item in $store.state[header.order].paperList">
        <div class="head_img"></div>
        <div class="right">
          <div class="info_box">
            <div>
              <div class="user_name">{{item.paper.owner.nickName}}</div>
              <article @click="$router.push('/paperDetail/'+item.paper.id)">{{item.paper.title}}</article>
              <ul class="tags">
                <li>#{{item.paper.contentType}}</li>
                <li>#{{item.paper.dir}}</li>
              </ul>
            </div>

          </div>
          <ul class="imgs">
            <li v-for="(n,nIndex) in item.refResList" :style="{backgroundImage:'url('+n+')'}"
                @click="showHD(item.refResList,nIndex)"></li>
          </ul>
            <br>
          <div class="operations">

            <van-icon name="arrow-up" size="0.50rem" color="#2c82d9" @click="setAttitude(item.paper.id,1)"/>
              <span>{{item.paper.pros-item.paper.cons}}</span>
            <van-icon name="arrow-down" size="0.50rem" color="#2c82d9" @click="setAttitude(item.paper.id,-1)"/>
              <span></span>
              <van-icon name="like-o" size="0.50rem" color="#2c82d9"/>
              <span>10</span>

              <van-icon name="comment-o" size="0.50rem" color="#2c82d9"/>
              <span>20</span>

          </div>

        </div>
        <br>
        <br>
      </div>
      </van-list>
      </div>
    </div>
</keep-alive>
  </div>
</template>

<script>
    import ltxService from '../services/LtxService'
    import {ImagePreview, Toast} from "vant";
    import storeUtil from '../utils/storeUtil'
  export default {
    name: "Home",
      computed:{
        ...storeUtil.makeFields(["hotPapers","newPapers"]),
          papers(){
            if(this.order=="hotPapers")
            {
                return this.hotPapers
            }
              if(this.order=="newPapers")
              {
                  return this.newPapers
              }
          }
      },
      mounted(){

      },
      methods:{
        onLoad(order)
        {
          if(order=='newPapers') this.nextNew(order)
          else this.nextHot(order)
        },
        nextNew(order)
        {
          ltxService.previewNew(this.papers.page).then(resp=>{
            let d=resp.data.data
            console.log(d)
            if(0==d.length)
            {
              this.papers.finished=true
            }
            else {
              for (let i = 0; i < d.length; i++) {
                this.papers.paperList.push(d[i]);
              }
            }
            this.papers.page++
            this.papers.loading=false
          })
        },
        nextHot(order)
        {
          ltxService.previewHot(this.papers.page).then(resp=>{
            let d=resp.data.data
            console.log(d)
            if(0==d.length)
            {
              this.papers.finished=true
            }
            else {
              for (let i = 0; i < d.length; i++) {
                this.papers.paperList.push(d[i]);
              }
            }
            this.papers.page++
            this.papers.loading=false
          })
        },
        showHD(imgs,index)
        {
            ImagePreview({images:imgs,startPosition:index})
        },
        setAttitude(paperId,emotion)
        {
            ltxService.setPaperAttitude(paperId,emotion).then(resp=>{

                    Toast("评价成功,评分:"+emotion)

            })


        }
      },
    data(){
      return{

          order:"newPapers",
          headerSelected:1,
          headers:[
              {name:'推荐内容',id:0,order:"hotPapers"},
              {name:'最新动态',id:1,order:"newPapers"}
          ],
        rangeValue:0
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/scss/base.scss";
  .home_ui{
    background-color: white;
      font-family: "微软雅黑", "宋体", Arial, Helvetica, sans-serif;
      header{
          display: flex;
          padding: 20px 15px;
          background-color: white;

          align-items: center;
          h1{color: $sub;
              font-weight: bold;
              width: 100px;
            font-size: $txt_large;
          }
          span{
              color: $lighter_gray;
              font-size: $txt_middle;
          }
      }
    .papers_box{
      background-color: $bg_gray;

      .h_flex{
        padding: 15px;
        background-color: white;
        margin-bottom: 10px;
        display: flex;
        .head_img{
          width: 50px;
          height: 50px;
          background-image: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=991732452,3647715660&fm=26&gp=0.jpg");
          background-size: cover;
          margin-right: 10px;
          @include radius(25px)
        }
        .right{
          width: 280px;

          .imgs{
            margin:10px 0;
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            justify-content: left;
            li{
              width: 80px;
              height:80px;
              background-color: aliceblue;
              margin: 4px 4px 0 0;
              border-radius: 5px;
                background-size: cover;
            }
          }
        }
        .info_box{
          display: flex;
          justify-content: space-between;
          button{
            width: 50px;
            height: 25px;
            background-color: $main;
            color: white;
            font-size: $txt_small;
            @include radius(4px);
            margin-top: 5px;
          }
        }

        .user_name{
          padding: 4px 0rem;
          font-size: $txt_middle;
          color:$lighter_gray
        }
        article{
          text-indent:0px;
          width: 260px;
          font-size: $txt_middle;
          line-height: $txt_middle+6px;
          padding:4px 0px;
          white-space:pre-wrap;
        }
        ul.tags{
          display: flex;
          li{
            border: 1px solid $sub ;
            padding: 2px 2px ;
            font-size: $txt_small;
            color: $sub;
            border-radius: 2px;
            margin: 3px 3px 0 0;
          }
        }
      }

    }

      .operations{
          height: 30px;
          display: flex;
          align-items: center;
          color:gray;

          &>span,&>.van-icon{
              margin: 0 7px;
              display: block;
          }
      }

  }
</style>
